<route lang="yaml">
  meta:
    enabled: false
  </route>

<script setup lang="ts">
interface RowVO {
  id: string
  name: string
  phone: string
  address: string
  level: number
  createTime: string
  wechat: string
}

const tableData = ref<RowVO[]>([
  { id: 10001, name: '李四', phone: '156****7754', wechat: '156****7754', address: '广东省深圳市宝安区西乡街道航城路2206号', level: 1, createTime: '2025-04-06 12:11:56' },
  { id: 10002, name: '李四', phone: '156****7754', wechat: '156****7754', address: '广东省深圳市宝安区西乡街道航城路2206号', level: 2, createTime: '2025-04-06 12:11:56' },
])
</script>

<template>
  <div>
    <FaPageHeader title="客户管理">
      <SearchBar :fold="false" :show-toggle="true" />
    </FaPageHeader>
    <FaPageMain>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="客户姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="wechat" label="微信号" width="120" />
        <el-table-column prop="level" label="客户类型" width="120">
          <template #default="scope">
            <span v-if="scope.row.level === 1">潜在客户</span>
            <span v-if="scope.row.level === 2">一般客户</span>
            <span v-if="scope.row.level === 3">优质客户</span>
            <span v-if="scope.row.level === 4">VIP客户</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="createTime" label="添加时间" width="180" />
      </el-table>
    </FaPageMain>
    <FaPagination :page="1" :size="10" :total="10" />
  </div>
</template>
